<html>
    <head>
        <title>计算属性 vs 监听属性</title>
    </head>
    <body>
        <script>
            
                    // ★三、计算属性 vs 侦听属性
                            /*
                                Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动: "监听属性"。
                                当你有一些数据需要随着其他数据变动而变动时，你很容易滥用 "watch" 。
                                然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
                            */

                            /*
                                    eg:
                                        <div id="demo">{{ fullName }}</div>
                            */
                            var vm=new Vue({
                                        el:'#demo',
                                        data:{
                                            firstName:'Foo',
                                            lastName:'Bar',
                                            fullName:'Foo Bare'
                                        },
                                        watch:{
                                            firstName:function(val){
                                                this.fullName=val+' '+this.lastName;
                                            },
                                            lastName:function(val){
                                                this.fullName=this.firstName +' '+val;
                                            }
                                        }
                                    });
                                // 上面的代码是命令式重复的。将它与计算属性的版本进行比较：
                                    var vm=new Vue({
                                        el:'#demo',
                                        data:{
                                            firstName:'Foo',
                                            lastName:'Bar'
                                        },
                                        computed:{
                                            fullName:function(){
                                                return this.firstName+' '+this.lastName;
                                            }
                                        }
                                    });
        </script>
    </body>
</html>